<!DOCTYPE html>
<html>
<head>
  <title>methods option</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。 -->
  <div id="app">
    {{a}}
    <div>
      <but @click.native="add(1)"></but>
    </div>
  </div>
  <button onclick="app.add(2)">外部add</button>
  <script type="text/javascript">
    var app = new Vue({
      el:"#app",
      data:{
        a: 1,
      },
      components: {
        but: {
          template: `
            <button>AddButton</button>
          `,
        }
      },
      methods: {
        add: function(num){
          this.a+=num;
        }
      }
    });
  </script>
</body>
</html>